<template>
    <div class="addAssets">
        <div class="index-head">
            <div class="left">
                <div class="title">
                    <i class="icon fl"></i>
                    <ul class="fr">
                        <li class="bold">新增固定资产</li>
                        <li>深圳辰尔科技有限公司</li>
                    </ul>
                </div>
            </div>
            <ul class="right fr">
                <li class="fl">
                    <pCircle :all="assetPro.all" :show="assetPro.show" :color="assetPro.color"></pCircle>
                    <p class="title tc">固定资产总量</p>
                </li>
                <li class="fl">
                    <pCircle :all="bandLabelPro.all" :show="bandLabelPro.show" :color="bandLabelPro.color"></pCircle>
                    <p class="title tc">绑定电子标签数量</p>
                </li>
                <li class="fl">
                    <pCircle :all="unBandLabelPro.all" :show="unBandLabelPro.show"
                             :color="unBandLabelPro.color"></pCircle>
                    <p class="title tc">未绑定电子标签数量</p>
                </li>
                <li class="fl">
                    <pCircle :all="warnPro.all" :show="warnPro.show" :color="warnPro.color"></pCircle>
                    <p class="title tc">开启报警数量</p>
                </li>
            </ul>
        </div>
        <div class="index-body upload">
            <div class="upload-head">
                <div class="circle">
                    <div class="li first">
                        <img :src="step1" alt="第一步">
                        <span class="text">1. 上传</span>
                    </div>
                    <div class="li">
                        <img :src="step2" alt="第二步">
                        <span class="text">2. 验证</span>
                    </div>
                    <div class="li last">
                        <img :src="step3" alt="第三步">
                        <span class="text">3. 提交</span>
                    </div>
                    <div class="dotted" :class="{orange:stepNum > 1}"></div>
                    <div class="dotted dotted-right" :class="{orange:stepNum > 2}"></div>
                </div>
            </div>
            <div class="upload-body">
                <div class="step step-one" v-show="step === 'one'">
                    <div class="btn tc">
                        <div class="file-name tl">{{ fileName }}</div>
                        <el-upload
                            class="file-btn tc"
                            ref="upload"
                            action="http://http://192.168.1.254:81/agent/api/assets/uploadExcel"
                            :data="params"
                            :limit="1"
                            :on-change="handleChange"
                            :on-success="uploadSuccess"
                            :multiple="false"
                            :show-file-list="false"
                            :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary" @click="chooseFile">选择文件</el-button>
                        </el-upload>
                    </div>
                    <ul class="tips">
                        <li>Tips:</li>
                        <li>
                            1.
                            <span class="orange">
                                请先布置区域再新增固定资产。
                            </span>
                        </li>
                        <li>
                            2.布置完区域后，
                            <a href="###">请点击下载最新固定资产批量导入模板。</a>
                        </li>
                        <li>
                            3.一次批量提交的固定资产不得超过1000台，否则将上传失败。
                        </li>
                        <li>
                            4.如果系统提示您有未完成的任务，可能是上次批量导入未完成或此时其他电脑正在用您的账户进行批量导入。
                        </li>
                        <li>
                            5.请避免您的账号同一时间使用不同电脑进行批量导入！
                        </li>
                        <li class="upload-img">
                            <img src="@/assets/images/upload.png" alt="上传" @click="submitUpload">
                        </li>
                    </ul>
                </div>
                <div class="step step-two" v-show="step === 'two-1'">
                    <p class="describe">验证结果：共 {{ tableData.length }} 条数据，其中 {{ failList.length }} 条数据不合法</p>
                    <el-table
                        :data="tableData"
                        style="width: 100%"
                        stripe
                        :height="tableH"
                        :max-height="tableH">
                        <el-table-column
                            prop="assetsName"
                            class-name="red"
                            label="固定资产名称">
                        </el-table-column>
                        <el-table-column
                            prop="id"
                            class-name="orange"
                            label="固定资产编号">
                        </el-table-column>
                        <el-table-column
                            prop="artificialAreaId"
                            label="所在区域">
                        </el-table-column>
                        <el-table-column
                            prop="personLiable"
                            label="负责人">
                        </el-table-column>
                        <el-table-column
                            prop="remark"
                            label="备注">
                        </el-table-column>
                        <el-table-column
                            prop="result"
                            label="失败原因">
                        </el-table-column>
                        <el-table-column
                            label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    @click.native.prevent="update(scope.row)"
                                    type="text"
                                    size="small">
                                    修改
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <p class="next-change">
                        <el-button type="primary" @click="stepPrev('one')">上一步</el-button>
                        <el-button type="primary" class="fr" @click="stepTwoNext">下一步</el-button>
                    </p>
                </div>
                <div class="step step-two" v-show="step === 'two-2'">
                    <p class="describe">验证结果：共 {{ tableData.length }} 条数据，其中 {{ failList.length }} 条数据不合法</p>
                    <el-table
                        class="no-btn"
                        :data="rightData"
                        style="width: 100%"
                        stripe
                        :height="tableH"
                        :max-height="tableH">
                        <el-table-column
                            prop="assetsName"
                            class-name="red"
                            label="固定资产名称">
                        </el-table-column>
                        <el-table-column
                            prop="id"
                            class-name="orange"
                            label="固定资产编号(ID)">
                        </el-table-column>
                        <el-table-column
                            prop="artificialAreaId"
                            label="所在区域">
                        </el-table-column>
                        <el-table-column
                            prop="personLiable"
                            label="负责人">
                        </el-table-column>
                        <el-table-column
                            prop="remark"
                            label="备注">
                        </el-table-column>
                    </el-table>
                    <p class="next-change">
                        <el-button type="primary" @click="stepPrev('two')">上一步</el-button>
                        <el-button type="primary" class="fr" @click="submit">提交</el-button>
                    </p>
                </div>
                <div class="step step-three" v-show="step === 'three'">
                    <p class="tc">
                        <i class="success-icon"></i>
                    </p>
                    <div class="success-text tc">
                        <p style="font-size: 0.2rem">成功提交 {{ tableData.length }} 条固定资产数据！</p>
                        <p class="to-check">
                            其中4台固定资产已自动绑定电子标签，请前往
                            <router-link tag="a" to='/layout/checkAssets'>
                                查看固定资产
                            </router-link>
                            页面进行查看！
                        </p>
                        <p>请尽快进行实地布置电子标签。</p>
                    </div>
                </div>
            </div>
        </div>
        <!--修改组件-->
        <el-dialog
            title="修改信息"
            :visible.sync="updateVisible"
            width="30%">
            <div class="content">
                <ul>
                    <li>
                        <label>
                            <input type="text" placeholder="名称" v-model="updateDate.assetsName">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="text" placeholder="固定资产编号" v-model="updateDate.id">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="text" placeholder="所在区域" v-model="updateDate.artificialAreaId">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="text" placeholder="责任人" v-model="updateDate.personLiable">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="text" placeholder="备注" v-model="updateDate.remark">
                        </label>
                    </li>
                </ul>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updateVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import pCircle from '@/components/progressCircle'

    export default {
        name: "addAssets",
        components: {
            pCircle
        },
        data() {
            return {
                /**
                 * 步骤条图片路径
                 */
                imgPath: {
                    on: require('@/assets/images/step_on.png'),
                    off: require('@/assets/images/step_off.png'),
                },
                step1: require('@/assets/images/step_on.png'),
                step2: require('@/assets/images/step_off.png'),
                step3: require('@/assets/images/step_off.png'),
                fileName: '请选择要上传的文件', // 文件名
                params: {}, // 上传附带参数
                step: 'one', // 控制进行到第几步
                stepNum: 1,
                tableData: [],
                rightData: [], // 下一步提交到第二个表格的数据
                failList: [], // 失败列表
                // 固定资产总量进度条参数
                assetPro: {
                    all: 0,
                    show: 0,
                    color: '#FF3F30'
                },
                // 绑定电子标签数量进度条参数
                bandLabelPro: {
                    all: 0,
                    show: 0,
                    color: '#FF910C'
                },
                // 未绑定电子标签数量进度条参数
                unBandLabelPro: {
                    all: 0,
                    show: 0,
                    color: '#3BDDEF'
                },
                // 开启报警数量进度条参数
                warnPro: {
                    all: 0,
                    show: 0,
                    color: '#CB65FF'
                },
                updateVisible: false, // 控制修改弹窗
                updateDate: {}, // 弹窗数据
                tableH: '400',
            }
        },
        methods: {
            /**
             * 选择文件
             */
            chooseFile() {
                this.$refs.upload.clearFiles()
                this.fileName = '请选择要上传的文件'
            },
            /**
             * 上传函数
             */
            submitUpload() {
                if (this.fileName === '请选择要上传的文件') {
                    this.$message.error(this.fileName)
                    return
                }
                if (localStorage.getItem("user")) {
                    this.params.userId = JSON.parse(localStorage.getItem("user")).userId
                }
                this.$refs.upload.submit()
            },
            /**
             * 文件状态改变
             * @param file
             * @param fileList
             */
            handleChange(file, fileList) {
                if (file.status === 'ready') {
                    this.fileName = file.name
                }
            },
            /**
             * 文件上传成功
             * @param response
             * @param file
             * @param fileList
             */
            uploadSuccess(response, file, fileList) {
                if (response.code === 200) {
                    this.step = 'two-1'
                    this.stepNum = 2
                    this.step2 = this.imgPath.on
                    this.failList = response.result.addAssetsFailList
                    let sucList = response.result.addAssetsSuccessList
                    this.tableData = this.failList.concat(sucList)
                } else {
                    this.$message.error(response.msg)
                    this.$refs.upload.clearFiles()
                    this.fileName = '请选择要上传的文件'
                }
            },
            stepPrev(step) {
                switch (step) {
                    case 'one':
                        this.step = 'one'
                        this.step2 = this.imgPath.off
                        this.chooseFile()
                        break
                    case 'two':
                        this.step = 'two-1'
                        break
                    default:
                        return false
                }
            },
            // 修改
            update(val) {
                this.updateVisible = true
                this.updateDate = val
            },
            /**
             * 第二步的下一步
             */
            stepTwoNext() {
                let params = this.tableData
                this.$ajax
                    .assets
                    .jsonCheck(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            let rsq = result.result
                            this.failList = rsq.addAssetsFailList
                            if (rsq.addAssetsFailList.length === 0) {
                                this.step = 'two-2'
                                this.stepNum = 2
                                this.step2 = this.imgPath.on
                                this.rightData = rsq.addAssetsSuccessList
                            } else {
                                this.$message.error(this.$msgDictionary.upload.fix)
                                this.tableData = this.failList.concat(rsq.addAssetsSuccessList)
                            }
                        } else if (result.code === 408) {
                            this.$message.error(this.$msgDictionary.loginTimeout)
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                this.$router.push({path: '/login'})
                            }, 1500)
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            /**
             * 提交
             */
            submit() {
                this.step = 'three'
                this.stepNum = 3
                this.step3 = this.imgPath.on
            }
        },
        mounted() {
            let winH = window.screen.height
            this.tableH = winH * 0.34
            let params = {
                userId: "",
            }
            if (localStorage.getItem("user")) {
                params.userId = JSON.parse(localStorage.getItem("user")).userId
            }
            this.$ajax
                .assets
                .getAssets(params)
                .then((res) => {
                    let result = res.data
                    if (result.code === 200) {
                        if (result.result) {
                            this.assetPro.all = result.result.totalAssetNum
                            this.assetPro.show = result.result.totalAssetNum
                            this.bandLabelPro.all = result.result.totalAssetNum
                            this.bandLabelPro.show = result.result.bandTagNum
                            this.unBandLabelPro.all = result.result.totalAssetNum
                            this.unBandLabelPro.show = result.result.notBandTagNum
                            this.warnPro.all = result.result.totalAssetNum
                            this.warnPro.show = result.result.alarmOpenNum
                        }
                    } else if (result.code === 408) {
                        this.$message.error(this.$msgDictionary.loginTimeout)
                        let timer = setTimeout(() => {
                            clearTimeout(timer)
                            this.$router.push({path: '/login'})
                        }, 1500)
                    } else {
                        this.$message.error(result.msg)
                    }
                }, () => {
                    this.$message.error(this.$msgDictionary.serviceException)
                })
        }
    }
</script>

<style lang="scss" type="text/scss" scoped>
    @import "../../assets/css/upload";

    .addAssets {
        height: 100%;
        .index-head {
            .left {
                .title {
                    .icon {
                        background-position: -149px -351px;
                    }
                }
            }
        }
    }
</style>
